<!DOCTYPE html>
<html>
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
	<meta name="format-detection" content="telephone=no, email=no"/>
	<meta charset="UTF-8">
	<title>优购优品网</title>
	<link rel="stylesheet" href="themes/css/core.css">
	<link rel="stylesheet" href="themes/css/icon.css">
	<link rel="stylesheet" href="themes/css/home.css">
	<link rel="icon" type="image/x-icon" href="favicon.ico">
	<link href="iTunesArtwork@2x.png" sizes="114x114" rel="apple-touch-icon-precomposed">
	<style>
		.n-tabs {
			position: fixed;
			top:44px;
			left: 0;
			width: 100%;
			height: 41px;
			overflow: hidden;
			z-index: 1000;
			background-color: #fff;
			box-shadow: 0 0 4PX 0PX rgba(155,143,143,0.6);
			-webkit-box-shadow: 0 0 4PX 0PX rgba(155,143,143,0.6);
			-moz-box-shadow: 0 0 4PX 0PX rgba(155,143,143,0.6);
		}
		.n-tabs .edge {
			position: fixed;
			top: 0;
			height: 41px;
			width: 100%;
			border-bottom: 1px solid #e5e5e5;
		}
		.n-tabs .n-tabContainer {
			-webkit-overflow-scrolling: touch;
			position: relative;
			top: 0;
			left: 0;
			overflow-x: auto;
			overflow-y: hidden;
			padding-left: 16px;
			height: 51px;
			font-size: 14px;
			color: #333;
			white-space: nowrap;
		}
		.n-tabs .n-tabContainer .navtab {
			display: -webkit-box;
			display: -webkit-flex;
			display: flex;
		}

		.n-tabs .n-tabContainer .n-tabItem {
			-webkit-box-flex: 1;
			-webkit-flex-grow: 1;
			flex-grow: 1;
			-webkit-flex-shrink: 0;
			flex-shrink: 0;
			display: inline-block;
			height: 41px;
			line-height: 41px;
			text-align: center;
			margin-left: 20px;
		}
		.n-tabs .n-tabContainer .n-tabItem:first-child {
			margin-left: 0;
		}
		.n-tabs .n-tabContainer .n-tabItem .current {
			display: inline-block;
			height: 41px;
			border-bottom: 2px solid #e31436;
			color: #e31436;
		}
	</style>
</head>
<body>
<div id="vue">
	<header class="aui-header-default aui-header-fixed ">
		<a href="javascript:history.back(-1);" class="aui-header-item">
			<i class="aui-icon aui-icon-back"></i>
		</a>
		<div class="aui-header-center aui-header-center-clear">
			<div class="aui-header-center-logo">
				<div><img src="themes/img/user/icon-dis.png" alt=""></div>
			</div>
		</div>
		<a href="#" class="aui-header-item-icon">
			<!--<i class="aui-icon aui-icon-packet"></i>-->
			<!--<i class="aui-icon aui-icon-member"></i>-->
		</a>
	</header>
	<!--<section class="n-tabs">-->
		<!--<ul class="n-tabContainer" id="auto-id-1509603311057">-->
			<!--<li class="n-tabItem" data-id="homepage">-->
				<!--<a href="#" id="homepage" class="current">视频购</a>-->
			<!--</li>-->
			<!--&lt;!&ndash;<li class="n-tabItem" data-id="44114">&ndash;&gt;-->
				<!--&lt;!&ndash;<a href="#" id="44114" class="">直播</a>&ndash;&gt;-->
			<!--&lt;!&ndash;</li>&ndash;&gt;-->
			<!--<li class="n-tabItem" data-id="15394">-->
				<!--<a href="#" id="15394" class="">图文</a>-->
			<!--</li>-->
			<!--<li class="n-tabItem" data-id="01436">-->
				<!--<a href="#" id="01436" class="">图集</a>-->
			<!--</li>-->
			<!--&lt;!&ndash;<li class="n-tabItem" data-id="18211">&ndash;&gt;-->
				<!--&lt;!&ndash;<a href="#" id="18211" class="">家居生活</a>&ndash;&gt;-->
			<!--&lt;!&ndash;</li>&ndash;&gt;-->
			<!--&lt;!&ndash;<li class="n-tabItem" data-id="83651">&ndash;&gt;-->
				<!--&lt;!&ndash;<a href="#" id="83651" class="">生鲜</a>&ndash;&gt;-->
			<!--&lt;!&ndash;</li>&ndash;&gt;-->
			<!--&lt;!&ndash;<li class="n-tabItem" data-id="37957">&ndash;&gt;-->
				<!--&lt;!&ndash;<a href="#" id="37957" class="">数码</a>&ndash;&gt;-->
			<!--&lt;!&ndash;</li>&ndash;&gt;-->
			<!--&lt;!&ndash;<li class="n-tabItem" data-id="74029">&ndash;&gt;-->
				<!--&lt;!&ndash;<a href="#" id="74029" class="">个人洗护</a>&ndash;&gt;-->
			<!--&lt;!&ndash;</li>&ndash;&gt;-->
			<!--&lt;!&ndash;<li class="n-tabItem" data-id="73179">&ndash;&gt;-->
				<!--&lt;!&ndash;<a href="#" id="73179" class="">海外直邮</a>&ndash;&gt;-->
			<!--&lt;!&ndash;</li>&ndash;&gt;-->
			<!--&lt;!&ndash;<li class="n-tabItem" data-id="41804">&ndash;&gt;-->
				<!--&lt;!&ndash;<a href="#" id="41804" class="">服饰鞋靴</a>&ndash;&gt;-->
			<!--&lt;!&ndash;</li>&ndash;&gt;-->
		<!--</ul>-->
	<!--</section>-->

	<div class="aui-content-box" style="padding-top:41px;">


		<!-- 卡片模块 三列 begin 关注店铺样式-->
		<section class="aui-card-content" v-for="item in productList" :key="item.item_id">
			<div class="aui-card-box" @click="goDetail(item)">
				<div class="aui-card-box-user">
					<img :src="item.author_avatar" alt="">
				</div>
				<div class="aui-card-box-name">
					<h2 class="aui-card-box-name">{{item.author_nick}}</h2>
					<span class="aui-card-box-btn">查看</span>
				</div>
				<div class="aui-card-box-time">{{formatDate(item.publish_time)}}&nbsp;&nbsp;发布</div>
			</div>
			<div class="aui-card-media-inner">
				<div class="aui-card-media-inner-title" @click="goDetail(item)">{{item.summary}}</div>
				<div class="aui-card-media-inner-padded">
					<div class="aui-card-media-inner-col-xs-3" v-for="imgStr in item.images.string">
						<img :src="imgStr" alt="">
					</div>
				</div>
			</div>
		</section>
		<!-- 卡片模块 end -->
	</div>

		<!-- 卡片模块 三列 begin 关注店铺样式-->
		<!--<section class="aui-card-content">-->
			<!--<div class="aui-card-box">-->
				<!--<div class="aui-card-box-user">-->
					<!--<img src="themes/img/user/user0.png" alt="">-->
				<!--</div>-->
				<!--<div class="aui-card-box-name">-->
					<!--<h2 class="aui-card-box-name">时尚优购店铺</h2>-->
					<!--<span class="aui-card-box-btn">关注</span>-->
				<!--</div>-->
				<!--<div class="aui-card-box-time">9月10日发布</div>-->
			<!--</div>-->
			<!--<div class="aui-card-media-inner">-->
				<!--<div class="aui-card-media-inner-title">双11你的购物车我全包了</div>-->
				<!--<div class="aui-card-media-inner-padded">-->
					<!--<div class="aui-card-media-inner-col-xs-3">-->
						<!--<img src="themes/img/pd/sf-7.jpg" alt="">-->
					<!--</div>-->
					<!--<div class="aui-card-media-inner-col-xs-3">-->
						<!--<img src="themes/img/pd/sf-5.jpg" alt="">-->
					<!--</div>-->
					<!--<div class="aui-card-media-inner-col-xs-3">-->
						<!--<img src="themes/img/pd/sf-6.jpg" alt="">-->
					<!--</div>-->
				<!--</div>-->
			<!--</div>-->
		<!--</section>-->
		<!-- 卡片模块 end -->
</div>
	<footer class="aui-footer-default aui-footer-fixed">
		<a href="../index.html" class="aui-footer-item">
			<span class="aui-footer-item-icon aui-icon aui-footer-icon-home"></span>
			<span class="aui-footer-item-text">首页</span>
		</a>
		<a href="./class.html" class="aui-footer-item">
			<span class="aui-footer-item-icon aui-icon aui-footer-icon-class"></span>
			<span class="aui-footer-item-text">分类</span>
		</a>
		<a href="javascript:void(0);" class="aui-footer-item aui-footer-active">
			<span class="aui-footer-item-icon aui-icon aui-footer-icon-find"></span>
			<span class="aui-footer-item-text">发现</span>
		</a>
		<a href="./ui-me.html" class="aui-footer-item">
			<span class="aui-footer-item-icon aui-icon aui-footer-icon-me"></span>
			<span class="aui-footer-item-text">我的</span>
		</a>
	</footer>
	<script type="text/javascript" src="themes/js/jquery.min.js"></script>
	<script type="text/javascript" src="themes/js/aui.js"></script>
	<script type="text/javascript" src="themes/vue2/vue.js"></script>
	<script type="text/javascript" src="themes/js/base.js"></script>
    <script>
        var vue = new Vue({
            el: '#vue',
            data: {
                productList:[],
                items: '',
                b:true,
				type:1,
            },
            created:function () {   //实例初始化创建完成执行
                this.getProductList();
                window.addEventListener('scroll', this.onScroll);
            },
            methods:{              //定义封装方法
                onScroll() {
                    //可滚动容器的高度
                    let innerHeight = document.querySelector('#vue').clientHeight;
                    //屏幕尺寸高度
                    let outerHeight = document.documentElement.clientHeight;
                    //可滚动容器超出当前窗口显示范围的高度
                    let scrollTop = document.body.scrollTop + document.documentElement.scrollTop;
                    //scrollTop在页面为滚动时为0，开始滚动后，慢慢增加，滚动到页面底部时，出现innerHeight < (outerHeight + scrollTop)的情况，严格来讲，是接近底部。
                    // console.log(innerHeight + " " + outerHeight + " " + scrollTop);
                    if ((innerHeight-110) < (outerHeight + scrollTop)) {
                        if(!this.b){
                            return;
                        }
                        //加载更多操作
                        console.log("loadmore："+this.items);
                        // this.items += 1;
                        this.b = false;
                        this.getProductList();
                    }
                },
                //获取列表
                getProductList:function () {
                    var self = this;
                    $.ajax({
                        type:"POST",
                        url:CTX+"/open/h5/tbk/getContentList",
                        dataType:"JSON",
                        data:{
                            before_timestamp:self.items,
							count:10,
							type:self.type
                        },
                        success:function(data){
                            if (data.code == 0) {
                                var list = self.productList;
                                var plist = data.data.tbk_content_get_response.result.data.contents.map_data;
                                self.items = data.data.tbk_content_get_response.result.data.last_timestamp;
                                var arrList = list.concat(plist);
                                self.productList = arrList;
                                self.b = true;
                            } else {

                            }
                        }
                    });
                },
                goDetail(item){
                    window.location.href = item.clink;
                },
                formatDate: function (value) {
                    var now = new Date(parseInt(value));
                    var year=now.getFullYear();
                    var month=now.getMonth()+1;
                    var date=now.getDate();
                    var hour=now.getHours();
                    var minute=now.getMinutes();
                    var second=now.getSeconds();
                    return year+"-"+month+"-"+date+" "+hour+":"+minute+":"+second;
                }
            },
            watch:{     //监听器

            }

        })
	</script>
</body>
</html>